import React from 'react';
import styles from './login.less';

import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input } from 'antd';
import { history } from 'umi';
import { loginIn } from './service';

export default function login() {
  const onFinish = async (values: any) => {
    const result = await loginIn(values);
    if (result) {
      localStorage.setItem('token', result.data);
      history.push('/');
    }
  };
  return (
    <div className={styles.content}>
      <div className={styles.formBox}>
        <Form
          wrapperCol={{ span: 12, offset: 6 }}
          name="normal_login"
          initialValues={{ remember: true }}
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: '请输入账号!' }]}
          >
            <Input prefix={<UserOutlined />} placeholder="账号" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: '请输入密码!' }]}
          >
            <Input
              prefix={<LockOutlined />}
              type="password"
              placeholder="密码"
            />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 6, span: 12 }}>
            <Button
              htmlType="submit"
              className={styles.submitBtn}
              type="primary"
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}
